<template>
  <div class="app-container">
    <van-nav-bar title="" left-arrow @click-left="$router.back()" />
    <div class="top-box">
      <div class="title-box">
        <div class="title">智慧工会</div>
        <div class="tip">保险经纪人</div>
      </div>
      <img :src="require('@/assets/images/insuranceRecommend/top_box_img.png')">
    </div>
    <div class="form-box">
      <el-scrollbar>
        <el-form ref="step1Ref" class="formStyle" :model="step1Form" :rules="step1Rules" label-position="top">
          <!-- <el-form-item v-if="step1Form.kinship == '其他'" />
          <el-form-item label="其他亲属关系" v-if="step1Form.kinship == '其他'">
            <el-input v-model="otherKinship" placeholder="请输入其他亲属关系" />
          </el-form-item> -->
          <el-form-item label="您是" prop="employeeCategory" label-width="70px">
            <el-radio-group v-model="step1Form.employeeCategory">
              <el-radio label="员工本人">员工本人</el-radio>
              <el-radio label="员工家属">员工家属</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="isPersonal">
              <el-option label="员工本人" :value="true" />
              <el-option label="员工家属" :value="false" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="您的身份" prop="telecomStaff" v-if="step1Form.employeeCategory == '员工本人'"
            label-width="100px">
            <el-select v-model="step1Form.telecomStaff">
              <el-option :label="item" :value="item" v-for="(item, index) in telecomStaffList" :key="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" prop="age" label-width="70px">
            <el-input v-model="step1Form.age" placeholder="请输入" />
            <!-- <el-select v-model="step1Form.ageSegment" placeholder="请选择年龄段">
              <el-option label="35岁及以下" value="35岁及以下" />
              <el-option label="36-50岁" value="36-50岁" />
              <el-option label="50-65岁" value="50-65岁" />
              <el-option label="65岁及以上" value="65岁及以上" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="城市" prop="cityName" label-width="70px">
            <el-select v-model="step1Form.cityName" filterable placeholder="请选择城市">
              <el-option :label="item" :value="item" v-for="(item, index) in citys" :key="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="经常出差" prop="businessTrip"
            :label-width="step1Form.employeeCategory == '员工家属' ? '242px' : '132px'">
            <el-radio-group v-model="step1Form.businessTrip">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="step1Form.businessTrip">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select> -->
          </el-form-item>
          <!-- <el-form-item v-if="!isPersonal" />
          <el-form-item label="亲属关系" prop="kinship" v-if="!isPersonal">
            <el-select v-model="step1Form.kinship" filterable placeholder="请选择亲属关系">
              <el-option :label="item" :value="item" v-for="(item, index) in kinshipList" :key="index" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="持续购买企业住院综合医疗险" prop="purchaseHospitalInsurance" label-width="242px">
            <el-radio-group v-model="step1Form.purchaseHospitalInsurance">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="step1Form.purchaseHospitalInsurance">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select> -->
          </el-form-item>
          <!-- <el-form-item label="退休" prop="retire">
            <el-select v-model="step1Form.retire">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="购买社保" prop="socialSecurity" label-width="242px"
            v-if="step1Form.employeeCategory == '员工家属'">
            <el-radio-group v-model="step1Form.socialSecurity">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="岗级" prop="positionLevel">
            <el-select v-model="step1Form.positionLevel" filterable placeholder="请选择岗级">
              <el-option :label="item" :value="item" v-for="(item, index) in jobRanks" :key="index" />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item v-if="isBackgroundDisease" /> -->
          <!-- <el-form-item label="员工类型" prop="staffType">
            <el-select v-model="step1Form.staffType" filterable placeholder="请选择员工类型">
              <el-option :label="item" :value="item" v-for="(item, index) in staffTypeList" :key="index" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="曾患重大疾病" prop="criticalIllness" label-width="132px">
            <el-radio-group v-model="step1Form.criticalIllness">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="step1Form.criticalIllness">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="患有慢性病" :label-width="step1Form.employeeCategory == '员工家属' ? '132px' : '242px'">
            <el-radio-group v-model="isBackgroundDisease">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="isBackgroundDisease">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="慢性病" prop="backgroundDisease" v-if="isBackgroundDisease" label-width="85px">
            <el-cascader v-model="backgroundDiseaseArr" :options="backgroundDiseaseOptionList"
              :props="{ multiple: true, emitPath: false }" :show-all-levels="false" clearable />
          </el-form-item>
        </el-form>
        <div class="btn-box">
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="step1Next()">下一步</el-button>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InsuranceForm',
  data() {
    return {
      step1Form: {
        age: '35',
        // ageSegment: '35岁及以下',
        cityName: '广州市',
        // positionLevel: '一级',
        socialSecurity: '是',
        businessTrip: '是',
        criticalIllness: '是',
        purchaseHospitalInsurance: '是',
        // retire: '否',
        backgroundDisease: false,
        // staffType: null,
        telecomStaff: '在岗员工',
        // kinship: '员工本人',
        employeeCategory: '员工本人',
      },
      step1Rules: {
        age: [{ required: true, message: '请输入年龄', trigger: 'change' }],
        // ageSegment: [{ required: true, message: '请选择年龄段', trigger: 'change' }],
        cityName: [{ required: true, message: '请选择城市', trigger: 'change' }],
        // positionLevel: [{ required: true, message: '请选择岗级', trigger: 'change' }],
        businessTrip: [{ required: true, message: '请选择是否经常出差', trigger: 'change' }],
        criticalIllness: [{ required: true, message: '请选择是否重大疾病', trigger: 'change' }],
        purchaseHospitalInsurance: [{ required: true, message: '请选择是否买过住院险', trigger: 'change' }],
        retire: [{ required: true, message: '请选择是否退休', trigger: 'change' }],
        // backgroundDisease: [{ required: true, message: '请选择是否有慢性病', trigger: 'change' }],
        telecomStaff: [{ required: true, message: '请选择是否电信员工', trigger: 'change' }],
      },
      isBackgroundDisease: false,
      telecomStaffList: ['在岗员工', '市场化承包人员', '外包服务人员', '在册不在岗员工', '内退', '退休人员'],
      citys: [
        '广州市',
        '深圳市',
        '佛山市',
        '珠海市',
        '江门市',
        '东莞市',
        '汕尾市',
        '惠州市',
        '梅州市',
        '湛江市',
        '阳江市',
        '茂名市',
        '揭阳市',
        '汕头市',
        '潮州市',
        '韶关市',
        '河源市',
        '肇庆市',
        '云浮市',
        '清远市',
        '中山市',
      ],
      backgroundDiseaseArr: [],
      backgroundDiseaseOptionList: [
        {
          value: '心血管疾病',
          label: '心血管疾病',
          children: [
            { value: '高血压（Ⅱ期及以上或伴并发症）', label: '高血压（Ⅱ期及以上或伴并发症）' },
            { value: '冠心病（含心绞痛、心肌梗死）', label: '冠心病（含心绞痛、心肌梗死）' },
            { value: '风湿性心脏病', label: '风湿性心脏病' },
            { value: '心肌病（扩张性心肌病等）', label: '心肌病（扩张性心肌病等）' },
            { value: '慢性心力衰竭', label: '慢性心力衰竭' },
            { value: '心脏瓣膜病', label: '心脏瓣膜病' },
            { value: '心律失常（如房颤）', label: '心律失常（如房颤）' },
          ],
        },
        {
          value: '呼吸系统疾病',
          label: '呼吸系统疾病',
          children: [
            { value: '支气管哮喘', label: '支气管哮喘' },
            { value: '慢性支气管炎', label: '慢性支气管炎' },
            { value: '阻塞性肺气肿/慢性阻塞性肺病（COPD）', label: '阻塞性肺气肿/慢性阻塞性肺病（COPD）' },
            { value: '支气管扩张', label: '支气管扩张' },
            { value: '慢性肺源性心脏病', label: '慢性肺源性心脏病' },
            { value: '活动性肺结核', label: '活动性肺结核' },
          ],
        },
        {
          value: '消化系统疾病',
          label: '消化系统疾病',
          children: [
            { value: '慢性肝炎（乙型/丙型）', label: '慢性肝炎（乙型/丙型）' },
            { value: '肝硬化（含失代偿期）', label: '肝硬化（含失代偿期）' },
            { value: '消化性溃疡', label: '消化性溃疡' },
            { value: '溃疡性结肠炎', label: '溃疡性结肠炎' },
            { value: '克罗恩病', label: '克罗恩病' },
            { value: '慢性萎缩性胃炎', label: '慢性萎缩性胃炎' },
          ],
        },
        {
          value: '泌尿系统疾病',
          label: '泌尿系统疾病',
          children: [
            { value: '慢性肾小球肾炎', label: '慢性肾小球肾炎' },
            { value: '慢性肾衰竭', label: '慢性肾衰竭' },
            { value: '肾病综合征', label: '肾病综合征' },
            { value: '尿毒症（需透析）', label: '尿毒症（需透析）' },
          ],
        },
        {
          value: '内分泌与代谢性疾病',
          label: '内分泌与代谢性疾病',
          children: [
            { value: '糖尿病（含并发症）', label: '糖尿病（含并发症）' },
            { value: '甲状腺功能亢进/减退', label: '甲状腺功能亢进/减退' },
            { value: '痛风', label: '痛风' },
          ],
        },
        {
          value: '神经系统疾病',
          label: '神经系统疾病',
          children: [
            { value: '脑梗塞/脑出血后遗症', label: '脑梗塞/脑出血后遗症' },
            { value: '帕金森病/综合征', label: '帕金森病/综合征' },
            { value: '癫痫', label: '癫痫' },
            { value: '重症肌无力', label: '重症肌无力' },
            { value: '多发性硬化', label: '多发性硬化' },
          ],
        },
        {
          value: '血液系统疾病',
          label: '血液系统疾病',
          children: [
            { value: '再生障碍性贫血', label: '再生障碍性贫血' },
            { value: '血友病', label: '血友病' },
            { value: '白血病', label: '白血病' },
          ],
        },
        {
          value: '风湿免疫性疾病',
          label: '风湿免疫性疾病',
          children: [
            { value: '类风湿性关节炎', label: '类风湿性关节炎' },
            { value: '系统性红斑狼疮', label: '系统性红斑狼疮' },
            { value: '强直性脊柱炎', label: '强直性脊柱炎' },
            { value: '干燥综合征', label: '干燥综合征' },
          ],
        },
        {
          value: '其他疾病',
          label: '其他疾病',
        },
      ],
    };
  },
  watch: {
    backgroundDiseaseArr: {
      handler(newVal) {
        this.step1Form.backgroundDisease = newVal.join('、');
      },
      immediate: true,
    },
    isBackgroundDisease: {
      handler(newVal) {
        if (newVal) {
          this.step1Rules.backgroundDisease = [{ required: true, message: '请选择慢性病', trigger: 'change' }];
        } else {
          this.step1Form.backgroundDisease = '';
          delete this.step1Rules.backgroundDisease;
        }
      },
      immediate: true,
    },
    // isPersonal: {
    //   handler(newVal) {
    //     if (newVal) {
    //       this.step1Form.kinship = '';
    //       delete this.step1Rules.kinship;
    //     } else {
    //       this.step1Rules.kinship = [{ required: true, message: '请选择亲属关系', trigger: 'change' }];
    //     }
    //   },
    //   immediate: true,
    // },
  },
  methods: {
    resetForm() {
      this.$refs.step1Ref.resetFields();
      this.backgroundDiseaseArr = [];
    },
    step1Next() {
      this.$refs.step1Ref.validate((valid) => {
        if (!valid) return;
        if (this.step1Form.ageSegment == '65岁及以上') {
          this.step1SubmitForm();
        } else if (
          this.step1Form.businessTrip == '是'
          // this.step1Form.businessTrip == '是' ||
          // ['一级', '二级', '三级', '四级', '五级', '六级'].includes(this.step1Form.positionLevel)
        ) {
          // this.$alert('尊敬的客户，鉴于您的场景多样化，为您的安全加双保险，现推荐您购买两份意外险', '温馨提示', {
          //   confirmButtonText: '确定',
          //   callback: (action) => {
          //     this.step1SubmitForm();
          //   },
          // });
          this.step1SubmitForm();
        } else {
          this.step1SubmitForm();
        }
      });
    },
    step1SubmitForm() {
      const params = JSON.parse(JSON.stringify(this.step1Form));
      if (params.backgroundDisease === '') params.backgroundDisease = '无';
      if (params.employeeCategory === '员工家属') delete params.telecomStaff;
      // if (params.kinship == '其他') params.kinship = this.otherKinship;
      // api.getListDs(params).then((res) => {
      //   if (res.code == 200) {
      //     this.$message({ message: '提交成功', type: 'success' });
      //     this.$emit('submitForm', params);
      //   }
      // });
      // this.$message({ message: '提交成功', type: 'success' });
      this.$emit('submitForm', params);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background: transparent;
  display: flex;
  flex-direction: column;
}

::v-deep .van-nav-bar {
  &::after {
    content: none;
  }
  .van-icon {
    color: #fff !important;
  }
}

.top-box {
  width: calc(100% - 60px);
  padding: 15px 30px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title-box {
    color: #fff;

    .title {
      font-family: YouSheBiaoTiHei;
      font-size: 30px;
    }

    .tip {
      font-size: 14px;
    }
  }
}

.form-box {
  width: calc(100% - 30px);
  // height: 100%;
  flex: 1;
  overflow: auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;

  ::v-deep .el-form {
    width: 100%;
    .el-form-item__label {
      line-height: normal;
    }
  }
}

.btn-box {
  display: flex;
  justify-content: center;
}
</style>
